<template>
  <div>
    <custom-table v-loading="listLoading" :data="list" :columnData="columnList" :hasC="true"
      @selection-change="handleSelectionChange">
      <template v-for="(item,index) in columnList">
        <template v-if="item.prop==='trackCount'">
          <el-table-column :prop="item.prop" :label="item.label" :key="index" :align="item.align" :fixed="item.fixed"
            v-if="custom.hasP(item.prop)">
            <template slot-scope="scope">
              <span style="color:#ff5b5b;cursor: pointer;"
                @click="addSubFormHandle(scope.row.id)">记录({{ scope.row.trackCount?scope.row.trackCount:0 }})</span>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column :prop="item.prop" :label="item.label" :key="index" :align="item.align" :width="item.width"
            :show-overflow-tooltip="item.overflow || true" :fixed="item.fixed" v-if="custom.hasP(item.prop)"
            :formatter="item.formatter" />
        </template>
      </template>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <table-opts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
          </table-opts>
        </template>
      </el-table-column>
    </custom-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
      @pagination="initData" />
  </div>

</template>
<script>   
import { getCustomerList, delCustomer } from '@/api/crm/customer'
export default {
  name: "PassList",
  data () {
    return {
      showAll: false,
      query: {
        name: undefined,
        area: undefined,
        phone: undefined,
        consultTime: undefined,
        consultChannel: undefined,
      },
      activeName: "1",
      defaultProps: {
        value: 'id',
        children: 'children',
        label: 'fullName',
        disabled: 'selectable'
      },
      list: [],
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "createTime",
      },
      formVisible: false,
      columnList: [
        { prop: 'name', label: '客户/机构名称' },
        { prop: 'name', label: '联系人' },
        { prop: 'mobile', label: '联系电话' },
        { prop: 'wechat', label: '微信' },
        { prop: 'provinceId', label: '省份' },
        { prop: 'cityId', label: '城市' },
        { prop: 'managerName', label: '销售经理' },
        { prop: 'receiveTime', label: '接收时间', formatter: this.custom.tableDateTimeFormat },
        { prop: 'trackCount', label: '跟进情况' },
        { prop: 'createTime', label: '创建日期', formatter: this.custom.tableDateTimeFormat },
        { prop: 'createUserName', label: '创建用户' },
        { prop: 'updateTime', label: '修改日期', formatter: this.custom.tableDateTimeFormat },
        { prop: 'updateUserName', label: '修改用户' },
      ],
    }
  },
  methods: {
    initData () {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query
      };
      let query = {}
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join()
        } else {
          query[key] = _query[key]
        }
      }
      getCustomerList(query).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleSelectionChange (val) {
      let obj = {};
      this.multipleSelection = arr.reduce(function (prev, item) {
        obj[item.id] ? "" : (obj[item.id] = 1 && prev.push(item))
        return prev;
      }, [])
    },
    handleDel (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        delCustomer(id).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {
              this.initData()
            }
          });
        })
      }).catch(() => {
      });
    },
  }
}
</script>